<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9,IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta charset="UTF-8">
    <title>抽奖</title>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/app/css/LArea.min.css" />
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/app/plugins/flavr/css/flavr.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/app/css/appLogin.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/app/plugins/dialog/css/dialog.css" />
    <style>body{background: #EFEFF4}</style>
</head>
<body>
<!--lottery-wrapper-->
<div class="lottery-wrapper low11Ios" data-MH="true" id="content-detail">
    <script type="text/html" id="tplLottery">
        <section class="top-info">
            <h3>{{info.title}}</h3>
        </section>
        <section class="lotto-box">
            <ul class="list" id="prizeList">
                <li class="item card">
                    <span class="front"><img src="<%=basePath%>/app/images/active/card.png" alt="" /></span>
                    <span class="back">
                        <img src="<%=basePath%>/app/images/active/backFace.png" alt="" />
                        <span class="prize"></span>
                    </span>
                </li>
                <li class="item card">
                    <span class="front"><img src="<%=basePath%>/app/images/active/card.png" alt="" /></span>
                    <span class="back"><img src="<%=basePath%>/app/images/active/backFace.png" alt="" />
                        <span class="prize"></span>
                    </span>
                </li>
                <li class="item card">
                    <span class="front"><img src="<%=basePath%>/app/images/active/card.png" alt="" /></span>
                    <span class="back"><img src="<%=basePath%>/app/images/active/backFace.png" alt="" />
                        <span class="prize"></span>
                    </span>
                </li>
            </ul>
        </section>
        <section class="tab-nav">
            <ul class="list" id="tabNav">
                <li class="active" data-target="#panel01"><span>活动介绍</span></li>
                <li data-target="#panel02"><span>中奖名单</span></li>
            </ul>
        </section>
        <!--panel-box-->
        <section class="panel-box">
            <!--活动介绍-->
            <article class="panel showIn" id="panel01">
                <!--info-list-->
                <div class="info-list">
                    <table>
                        <tr>
                            <th>活动时间</th>
                            <td>{{formatTime(info.start_time,'MM月dd日 HH:ii', false)}} - {{formatTime(info.end_time,'MM月dd日 HH:ii', false)}}</td>
                        </tr>
                        <tr>
                            <th>免费次数</th>
                            <td>{{info.num}}次</td>
                        </tr>
                    </table>
                </div>
                <!--/info-list-->
                <div class="detail">
                    <div class="title"><h2>活动详情</h2></div>
                    <div class="content">
                        {{info.content}}
                    </div>
                </div>
            </article>
            <!--中奖名单-->
            <article class="panel" id="panel02">
                <!--getPrize-->
                <div class="getPrize">
                    <table>
                        {{if typeof lotteryList != undefined && lotteryList.length > 0}}
                        {{each lotteryList as value i}}
                        <tr>
                            <td>{{i + 1}}</td>
                            <td>{{value.name}}</td>
                            <td>{{value.prize_name}}</td>
                            <td>{{formatTime(value.create_time,'yyyy-MM-dd HH:ii', false)}}</td>
                        </tr>
                        {{/each}}
                        {{else}}
                        <tr>
                            <td colspan="4" style="text-align: center;color: #999">暂无人中奖哦~~</td>
                        </tr>
                        {{/if}}
                    </table>
                </div>
                <!--/getPrize-->
            </article>
        </section>
    </script>
    <!--/panel-box-->
</div>

<div class="prize-wrap" id="prizeWrap">
    <div class="inner">
        <div class="title">
            <h2>领取奖品</h2>
        </div>
        <!--content-->
        <div class="content">
            <form method="post" action="#" class="getPrize">
                <p>请填写信息领取奖品，若不填写则默认为放弃</p>
                <br />
                <input type="hidden" id="log_id" >
                <div class="ipt-txt">
                    <input type="text" name="name" id="name" value="" placeholder="用户名" />
                </div>
                <div class="ipt-txt">
                    <input type="tel" name="mobile" id="mobile" value="" placeholder="手机号" />
                </div>
                <div class="ipt-txt">
                    <!--城市名称数据，对应：省,市,区-->
                    <input type="text" name="cityName" value="" tabindex="1" placeholder="请选择所在地区" readonly id="viewCity" />
                    <!-- 城市id数据， 对应 省,市,区 -->
                    <input type="hidden" name="cityId" value="" id="cityData"/>
                </div>
                <div class="ipt-txt">
                    <input type="text" name="address" id="address" placeholder="详细地址" />
                </div>
                <div class="error-wrap"></div>
                <button type="button" class="btn-submit">保存</button>
                <p style="width: 100%;text-align: center;">---------------------- 或者 ---------------------</p>
                <button type="button" class="btn-quit">放弃</button>
            </form>
        </div>
        <!--/content-->
    </div>
</div>
<script type="text/javascript" src="<%=basePath%>/app/js/LArea/LAreaData2.js"></script>
<script type="text/javascript" src="<%=basePath%>/app/js/LArea/LArea.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/app/plugins/flavr/js/myFlavr.js"></script>
<script type="text/javascript" src="<%=basePath%>/app/plugins/dialog/js/dialog.js"></script>
<!--/lottery-wrapper-->
<script type="text/javascript">

    var _prizeWrap, _validateParam = {
        wrapper: "p",
        errorLabelContainer : 'div.error-wrap',
        ignore:".ignore",
        rules : {
            name : {required : true },
            mobile : {required : true, isMobile : true},
            cityName : {required : true},
            address : {required : true}
        },
        messages : {
            name : {required : '请输入姓名' },
            mobile : {required : '请输入手机号', isMobile : '请输入正确手机号格式'},
            cityName : {required : '请选择城市信息'},
            address : {required : '请输入详细地址'}
        }
    };

    //初始化获取奖品弹框
    function initialGetPrize(){
        _prizeWrap = $('#prizeWrap');

        var _active = 'active';

        _prizeWrap.find('a.btn-close').on('tap', function(){
            _prizeWrap.itHide();
        });

        _prizeWrap.itShow = function(){
            _prizeWrap.css({'display': 'block'});
            setTimeout(function(){
                _prizeWrap.addClass(_active);
            }, 20);
        };

        _prizeWrap.itHide = function(){
            _prizeWrap.removeClass(_active);
            setTimeout(function(){
                _prizeWrap.hide();
            }, 200);
        };

        // - - - - - - - - - - 事件 - - - - - - - - - - - -
        //城市选择
        var area2 = new LArea();
        area2.init({
            'trigger': '#viewCity',
            'valueTo': '#cityData',
            'keys': {id: 'value', name: 'text'},
            'type': 2,
            'data': [provs_data, citys_data, dists_data]
        });

        //表单校验
        var _form = _prizeWrap.find('form.getPrize');
        _form.validate(_validateParam);

        _prizeWrap.find('button.btn-submit').on('tap', function(){
            if(_form.valid()){
                $.ajax({
                    url: _basePath + "app/act/completeLottery",
                    data: {
                        id:$("#log_id").val(),
                        name:$("#name").val(),
                        mobile:$("#mobile").val(),
                        address:$("#viewCity").val() + $("#address").val()
                    },
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        if (typeof data != undefined && data.resCode == 0) {
                            mui.toast("提交成功，请等待工作人员与您联系");
                            setTimeout(function () {
                                window.location.href = updateUrl(window.location.href);
                            },1000);
                        } else {
                            mui.toast(data.message);
                        }
                    }
                })
            }
        });

        _prizeWrap.find('button.btn-quit').on('tap', function(){
            $.ajax({
                url: _basePath + "app/act/quitLottery",
                data: {
                    id:$("#log_id").val()
                },
                dataType: "json",
                type: "post",
                success: function (data) {
                    if (typeof data != undefined && data.resCode == 0) {
                        mui.toast("放弃奖品成功");
                        _prizeWrap.itHide();
                        setTimeout(function () {
                            window.location.href = updateUrl(window.location.href);
                        },100);
                    } else {
                        mui.toast(data.message);
                    }
                }
            })
        });
    }

    //
    function showPanel(){
        var _nav = $('ul#tabNav li'), _panels = $('article.panel'), _active = 'active', _showIn = 'showIn';
        _nav.on('tap', function(){
            var _target = $($(this).data('target'));

            if('undefined' !== typeof _target.get(0)){
                _panels.removeClass(_showIn);
                _target.addClass(_showIn);

                _nav.removeClass(_active);
                $(this).addClass(_active);
            }
        });
    }

    function lottery(){
        var _list = $('ul#prizeList .item.card');
        _list.on('tap', '.front', function(){
            var _ele = $(this);
            checkLogin(function () {
                lotterySubmit(_ele);
            },function () {
                initLogin()
            });
        });

    }

    function lotterySubmit(_ele) {
        var _list = $('ul#prizeList .item.card'), _hover = 'hover';
        $.ajax({
            url: _basePath + "app/act/lottery",
            data: {
                id: ${id}
            },
            dataType: "json",
            type: "post",
            success: function (data) {
                if (typeof data != undefined && data.resCode == 0) {
                    //抽奖返回
                    $("#log_id").val(data.resultList.log_id);
                    var _prize = _ele.parent().find(".prize");
                    if(data.resultList.type != 99){
                        _prize.append("恭喜您获得");
                        _prize.append("<br />");
                        _prize.append(prizeType(data.resultList.type));
                        _prize.append("<br />");
                        _prize.append(data.resultList.prize_name);
                        _list.off('tap', '.front').on('tap', '.front', function(){
                            _prizeWrap.itShow();
                        });
                        _ele.parent().addClass(_hover).find('.back').on('tap', function(){
                            _prizeWrap.itShow();
                        });
                    }else{
                        _list.off('tap', '.front');
                        _ele.parent().addClass(_hover);
                        _ele.parent().find("img").attr("src", _basePath + "app/images/active/backFace_1.png");
                        _prize.append("不好意思");
                        _prize.append("<br />");
                        _prize.append("您没有中奖哦..");
                    }
                } else {
                    mui.toast(data.message);
                }
            }
        });
    }


    $(function(){
        $.ajax({
            url: _basePath + "app/act/lotteryDetail",
            data: {id: '${id}'},
            dataType: 'json',
            success: function (data) {
                if(typeof data != undefined && data.resCode == 0){
                    shareWx(window.location.href,data.resultList.info.theme_pic,data.resultList.info.title,data.resultList.info.title);
                    var _html = template('tplLottery', data.resultList);

                    $("#content-detail").append(_html);
                    var iPhone = navigator.userAgent.match(/OS 11_\d[_\d]* like Mac OS X/i);
                    if(null != iPhone && 'string' === typeof iPhone[0]){
                        $('div.lottery-wrapper').removeClass('low11Ios').addClass('ios-11-wrap')
                    }
                    registerReset();
                    showPanel();
                    initialGetPrize();
                    lottery();
                }else{
                    mui.toast(data['message']);
                }
            }
        });
    });
</script>